<template>
        <div class="goeasy-expression">
            <div :class="[appearanceClass, 'goeasy-appearance']" @click="show = true">{{text}}</div>
            <div class="expression-container" v-show="show">
                <div class="expression-icon-content">
                    <div class="expression-icon__item"
                         v-for="expression in list"
                         :key="expression.id"
                         @click="selectExpression(expression)">
                        <img :src="expressions[expression.tag]">
                    </div>

                </div>
                <div class="close-expression" @click="show = false"></div>
            </div>
        </div>
</template>

<script>
    import expressions from "./expressions";
    export default {
        name: "GoEasyExpression",
        props : ['text', 'appearanceClass'],
        data () {
            return {
                show : false,
                list : [
                    {tag: '[risus]', id:1},
                    {tag: '[kiss]', id:2},
                    {tag: '[cry]', id:3},
                    {tag: '[die]', id:4},
                    {tag: '[anger]', id:5}
                ],
                expressions : expressions
            }
        },
        methods : {
            selectExpression (expression) {
                this.show = false;
                this.$emit('onSelectExpression', expression);
            }
        }
    }
</script>

<style scoped>

    .goeasy-expression{
    }
    .expression-container{
        width: 100%;
        height: 1.08rem;
        display: flex;
        flex-direction: column;
        position: absolute;
        bottom: -1rem;
        left:0;
        background: #F3F3F3;;
        z-index: 35;
        align-items: center;
    }
    .expression-icon-content{
        height: 0.46rem;
        display: flex;
        justify-content: space-evenly;
        width: 100%;
    }
    .expression-icon__item{
        height: 0.46rem;
        width: 0.46rem;
    }
    .expression-icon__item img{
        height: 0.46rem;
        width: 0.46rem;
        display: block;
    }
    .close-expression{
        width: 0.24rem;
        height: 0.24rem;
        font-size: 0.2rem;
        margin-top: 0.2rem;
        background: url("./images/close.png") no-repeat center ;
        background-size:0.2rem;
    }
</style>